<template>
	<el-dialog :title="title" :visible.sync="detailVisible" width="1200px" :before-close="handleClose">
		<el-calendar v-model="date">
			<template #dateCell="{ date }">
				<div :class="getCellClass(date)" @click="handleDateClick(date)" style="cursor: pointer; height: 100%">
					{{ date.getDate() }}
					<div v-if="isToday(date)" style="color: #999; font-weight: 500; display: flex; align-items: center; margin-top: 10px;">
						<div
							class="dot"
							style="width: 6px; height:6px; border-radius: 10px; background: #5ac4b6; margin-right: 6px;"
						></div>
						<div v-if="type == 2">9:00复查</div>
						<div v-if="type == 1">10:00吃药</div>
					</div>
				</div>
			</template>
		</el-calendar>
		<span slot="footer" class="avue-dialog__footer">
			<el-button size="small" @click="detailVisible = false" icon="el-icon-circle-close">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
export default {
	name: "PlanModal",
	data() {
		return {
			date: this.value,
			detailVisible: false,
			title: "",
			type: ""
		};
	},

	methods: {
		handleOpen(hospPatientId, type) {
			this.hospPatientId = hospPatientId;
			this.type = type;
			this.title = type == 1 ? "护理计划" : "康复计划";
			this.detailVisible = true;
		},
		handleClose() {
			this.detailVisible = false;
		},
		handleOk() {
			this.$emit("ok", this.date);
		},
		handleCancel() {
			this.$emit("cancel");
		},
		handleDateClick(date) {
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			const clickDate = new Date(date);
			clickDate.setHours(0, 0, 0, 0);
			if (clickDate >= today) {
				console.log("clickDate", clickDate);
				this.$emit("date-click", clickDate);
			}
		},
		isToday(date) {
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			const cellDate = new Date(date);
			cellDate.setHours(0, 0, 0, 0);
			return today.getTime() == cellDate.getTime();
		},
		getCellClass(date) {
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			const cellDate = new Date(date);
			cellDate.setHours(0, 0, 0, 0);
			return cellDate >= today ? "can-click" : "";
		}
	}
};
</script>

<style scoped>
.can-click {
	/* color: #000; */
	font-weight: bold;
}
</style>
